<template>
  <div class="weui-cells weui-cells_after-title">
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <img :src="icon" style=""></img>
      </div>

        <div class="weui-cell__bd">
          <navigator url="">
          北京 朝阳区 管庄
          </navigator>
        </div>
      <div class="weui-cell__ft" @click="edit">编辑商品</div>
    </div>
    <div class="hr"></div>
    <div class="weui-tab">
      <div class="weui-navbar">
        <block v-for="(item,index) in tabs" :key="index">
          <div :id="index" :class="{'active':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
            <div class="weui-navbar__title">{{item}}</div>
          </div>
        </block>
      </div>
      <div class="panel">
        <div class="weui-tab__content" :hidden="activeIndex != 0">
          <div class="check-list">
            <label class="checkbox" v-for="(item,index) in items">
              <checkbox :value="item.name"  :checked="item.checked" hidden="false"/>
              <ul class="check-flex" @click="singCheck(item.checked,index)">
                <li class="list-check">
                  <icon type="success" color="#E93B3D" size="24" :hidden="!item.checked"/>
                  <icon type="circle" color="#999" size="24" :hidden="item.checked"/>
                </li>
                <li class="list-img"><img :src="imgSrc" mode="widthFix"></li>
                <li class="list-content">
                  <ul>
                    <li class="list-cont-top">
                      杰赛 (gemside) 智能全自动炒菜机E15自动烹饪锅电炒锅 炒菜机器
                    </li>
                    <li class="list-cont-md">
                      <p>单价： ￥ <span class="big-size">188</span>.00 (一手5件)</p>
                      <p class="list-cont-md-right">重5g</p>
                    </li>
                    <li class="list-cont-ft">
                      售价：￥
                      <span class="big-size">98</span>
                      .00
                    </li>
                  </ul>

                </li>
              </ul>
            </label>
          </div>
          <label>
            <input type='checkbox' class='input-checkbox' :checked='isCheck' hidden>
            <ul class="check-all">
              <li class="check-all-lf" @click='checkedAll'>
                <icon type="success" color="#E93B3D" size="24" :hidden="!isCheck"/>
                <icon type="circle" color="#999" size="24" :hidden="isCheck"/>
                全选
              </li>
              <li class="check-all-md">
                <p class="check-all-md-top">总计：<span class="red">￥404.00</span></p>
                <p class="check-all-md-grey">累计运费： ￥48.00</p>
              </li>
              <li class="check-all-rt">
                <button class="btn" type="warn" @click="warn"> 去结算 </button>
              </li>
            </ul>
          </label>
        </div>
        <div class="weui-tab__content" :hidden="activeIndex != 1">
        </div>
        <div class="weui-tab__content" :hidden="activeIndex != 2">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        icon: '',
        imgSrc: '',
        tabs: [
          '待付款',
          '待通知付款',
          '失效订单',
          '待评价',
          '已完成'
        ],
        activeIndex: 0,
        items: [
          {
            name: 'USA',
            value: '美国',
            checked: false
          },
          { name: 'CHN',
            value: '中国',
            checked: false
          },
          { name: 'BRA',
            value: '巴西',
            checked: false
          },
          { name: 'JPN',
            value: '日本',
            checked: false
          },
          { name: 'ENG',
            value: '英国',
            checked: false
          },
          { name: 'TUR',
            value: '法国',
            checked: false
          }
        ],
        checkArr: [],
        isCheck: 0
      }
    },
    computed: {

    },
    methods: {
      tabClick (e) {
        console.log(e)
        this.activeIndex = e.currentTarget.id
      },
      singCheck (check, index) {
        var _this = this
        _this.items[index].checked = !check
        var isCheck = 1
        _this.items.forEach(function (item) {
          if (!item.checked) {
            isCheck = 0
          }
        })
        _this.isCheck = isCheck ? 1 : 0
      },
      checkedAll () {
        var _this = this
        _this.isCheck = !_this.isCheck
        _this.items.forEach(function (item) {
          item.checked = _this.isCheck
        })
        console.log(this.items, _this.isCheck)
      }
    },
    mounted () {
      this.icon = require('./dibiao.png')
      this.imgSrc = require('./shop1.png')
    },
    watch: { // 深度 watcher

    }
  }

</script>
<style lang="less" rel="stylesheet/less" scoped>
  .weui-cell{
    font-size: 24rpx;
    .weui-cell__hd{
      img{
        margin-right: 10rpx;
        vertical-align: middle;
        width:40rpx;
        height: 40rpx;
      }
    }
    .weui-cell__bd{
      color:#999;
    }
    .weui-cell__ft{
      color:#E93B3D;
    }
  }
  .hr{
    height: 40rpx;
    background: #f8f8f8;
    border-top: 1rpx solid #D7D6DC;
    border-bottom: 1rpx solid #D7D6DC;
  }
  .weui-tab{
    height: calc(100vh - 124rpx);
    .weui-navbar{
      .weui-navbar__item{
        .weui-navbar__title{
          width: 149rpx;
          font-size: 24rpx;
          border-right: 1rpx solid #D7D6DC;
        }
        &:last-child .weui-navbar__title{
          border-right: none;
        }
      }
      .active{
        color: #E93B3D;
      }
    }
    .panel{
      position:absolute;
      top:84rpx;
      .weui-tab__content{
        .check-list{
          width: 750rpx;
          height: calc(100vh - 310rpx);
          overflow-y:scroll;
          .check-flex{
            display: flex;
            flex-direction: row;
            padding: 20rpx 40rpx;
            padding-left: 0;
            border-bottom: 1rpx solid #D7D6DC;
            .list-check{
              display: flex;
              padding: 0 20rpx;
              justify-content:center;
              align-items:center;
            }
            .list-img{
              display: flex;
              padding: 0 20rpx;
              justify-content:center;
              align-items:flex-end;
              img{
                width: 150rpx;
              }
            }
            .list-content{
              font-size: 20rpx;
              .big-size{
                font-size: 24rpx;
              }
              .list-cont-top{
                font-size: 28rpx;
                font-weight: bold;
              }
              .list-cont-md{
                display: flex;
                flex-direction: row;
                line-height: 40rpx;
                color: #999;
                .list-cont-md-right{
                  flex-grow: 1;
                  margin-right: 10rpx;
                  text-align: right;
                }
              }
              .list-cont-ft{
                color: #E93B3D;
              }
            }
          }
        }
        .check-all{
          display: flex;
          height: 100rpx;
          flex-direction: row;
          .check-all-lf{
            display: flex;
            flex-direction: column;
            padding: 0 20rpx;
            font-size: 20rpx;
            color: #999;
            justify-content:center;
            align-items:center;
          }
          .check-all-md{
            margin-right: 10rpx;
            flex-grow: 1;
            text-align: right;
            .check-all-md-top{
              font-size: 28rpx;
              line-height: 60rpx;
              font-weight: bold;
            }
            .check-all-md-grey{
              margin-right: 30rpx;
              font-size: 20rpx;
              line-height: 40rpx;
              color: #999;
            }
            .red{
              color:#E93B3D;
            }
          }
          .check-all-rt{
            button.btn{
              line-height: 100rpx;
              padding: 0 40rpx;
              border-radius: 0;
            }
          }
        }
      }
    }
  }

</style>
